<template>
  <view style="background-color: #fefefe;">
    <view>
      <view class="page_top2" :style="{
        background: topNav ? 'white' : 'transparent',
        'z-index': 199,
      }">
        <top-status></top-status>
        <view class="tabsBack">
          <view @click="goBack()" class="blackbox">
            <uni-icons :color="topNav ? 'black' : '#ffffff'" type="left" size="30"></uni-icons>
          </view>
          <view class="topTitle hiddenText" v-show="topNav">{{ reqData.TeamName ?
            $util.entitiesToUtf16(reqData.TeamName) : '' }}</view>
        </view>
      </view>
    </view>
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else>
      <!-- 背面 -->
      <view class="backView" :style="[{ 'padding-top': topheight + 'px' }]">
        <view class="bglogo">
          <view class="bglImg">
            <image :src="reqData.Logo" mode="widthFix" />
            <view class="darken-mask"></view>
          </view>

        </view>

        <view class="bvContent">
          <view style="width:100%;" @click="seeBGImg(reqData.Logo)">
            <view class="bvLogo">
              <image class="bvLogoImg" :src="reqData.Logo" mode="aspectFill" />
              <view v-if="reqData.IsTeamAdmin == 1" class="bvadd"
                @click.stop="nav_to('/pages/together/cir_edit?id=' + cirID)">编辑圈子</view>
            </view>
            <view class="bvTitle">{{ reqData.TeamName ? $util.entitiesToUtf16(reqData.TeamName) : '' }}</view>
            <view class="bvRemark">{{ reqData.Tips ? $util.entitiesToUtf16(reqData.Tips) : '' }}</view>
          </view>

          <view class="bvInformation">
            <view class="bvNumBox">
              <view class="bvNumCell">
                <view class="bvnNum">{{ temaHotValue }}</view>
                <view class="bvnName">挥力值</view>
              </view>
              <view class="bvNumCell">
                <view class="bvnNum">{{ temaBrowserNum }}</view>
                <view class="bvnName">浏览</view>
              </view>
              <view class="bvNumCell"
                @click="nav_to('/pages/together/cir_member?id=' + reqData.ID + '&IsTeamuser=' + IsTeamuser)">
                <view class="bvnNum">{{ reqData.MemberNum }}</view>
                <view class="bvnName">成员</view>
              </view>
            </view>
            <view class="bvnBtnBox">
              <view class="erwBtn" style="opacity:0;">
                <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17223303645431126.png"
                  mode="widthFix" />
              </view>
              <block v-if="reqData.IsTeamAdmin == 1 && reqData.Status == 1">
                <view class="joinBtn" @click.stop="nav_to('/pages/ball/ball_add?golfType=0&id=' + reqData.ID)">
                  发布活动
                </view>
              </block>
              <block v-else-if="reqData.IsTeamAdmin == 1 && reqData.Status != 1">
                <view class="joinBtn" :style="{ color: reqData.Status == -1 ? '#ff0000' : '#EFEFEF',background: reqData.Status == -1 ? '#d2cfcf' : '#706EEE' }">
                  {{ reqData.Status ==0 ?'审核中':'未通过'}}
                </view>
              </block>
              <block v-else>
                <view class="quitBtn" v-if="reqData.IsJoin == 1" @click="quitTeam(reqData)">
                  已加入
                </view>
                <view class="joinBtn" v-else @click="JoinTeam(reqData.ID)">
                  加入圈子
                </view>
              </block>

            </view>
          </view>
          <view class="bvTagsBox">
            <block v-if="reqData.Tag">
              <view class="bvtCell" v-for="(item, index) in setTagData" :key="index"
                :style="{ background: (item.style.bgColor?item.style.bgColor:''), color: (item?item.style.color:'') }">
                {{ item.name }}
              </view>

            </block>
          </view>
          <view class="bvContentBox" style="margin: 82rpx 0 66rpx 0;">
            <view class="bvcTitle">圈子城市</view>
            <view class="bvcBRight">
              <view class="cityIcon">
                <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722248127800963.png"
                  mode="widthFix" />
              </view>
              <view class="bvcText-city">{{ reqData.City ? reqData.City : '' }}</view>

            </view>
          </view>
          <view class="bvContentBox" style="margin-bottom: 16rpx;">
            <view class="bvcTitle">圈子成员</view>
            <view class="bvcBRight" @click="nav_to('/pages/together/cir_member?id=' + reqData.ID)">
              <view class="bvcText-user">{{ reqData.MemberNum + '成员' }}</view>
              <view class="arrowIcon">
                <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722248140342710.png"
                  mode="widthFix" />
              </view>
            </view>
          </view>
          <view class="bvUserBox">
            <scroll-view :scroll-x="true" style="width: 100%;height:140rpx;">
              <view class="bvUserList">
                <block v-for="(item, index) in userList" :key="index">
                  <view class="bvuCell" @click.stop="nav_to('/pages/user/user_visitor?id=' + item.UserID)">
                    <view class="bvuHead">
                      <image class="bvLogoImg" :src="item.HeadImgUrl" mode="aspectFill" />
                    </view>
                    <view class="bvuName hiddenText">{{ $util.entitiesToUtf16(item.Name) }}</view>
                  </view>
                </block>
              </view>
            </scroll-view>
          </view>
          <view class="bvContentBox" style=" margin: 20px 0 20px 0;">
            <view class="bvcTitle">圈子介绍</view>
          </view>
          <view class="bvCdescBox">
            {{ reqData.Descript ? $util.entitiesToUtf16(reqData.Descript) : '' }}

          </view>

        </view>
      </view>
      <!-- 可滑动页面 -->
      <!-- <view class="bgBox"> -->
      <you-touchbox ref="touchBox" :disable="isTouchDisable" @get-end-detail="getEndDetail" :initTop="0.6" maxTop=".88"
        minTop="160" customStyle="border-radius:32rpx 32rpx 0 0;background: #F6F6F6;">
        <view style="padding: 0 24rpx;display: flex;flex-direction: column;height: 100%;" @click.stop>
          <view class="topTab">
            <block v-for="(item, index) in tabList" :key="index">
              <view class="tabTitle" :class="{ tabTitleIng: nowTab == index }" @click.stop="chooseTab(index)">{{
                item.title }}{{ item.num > 0 ? `(${item.num})` : '' }} </view>
            </block>
          </view>
          <scroll-view :scroll-y="true" style="flex: 1;height:1px;" @scrolltolower="lowermore">
            <!-- 一起挥 -->
            <block v-if="nowTab == 0">
              <view class="actconBoxList">
                <block v-if="actList.length > 0">
                  <block v-for="(item, index) in actList" :key="index">
                    <ActivityCell :item="item"></ActivityCell>
                  </block>
                </block>
                <view class="empty" v-else>
                  <u-empty mode="list" width="100" height="100"
                    icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
                    iconSize="32" text="暂无活动"></u-empty>
                </view>
              </view>
            </block>
            <!-- 圈友动态 -->
            <block v-if="nowTab == 1">
              <view class="album">
                <view class="albumTitle" v-if="reqData.IsJoin == 1">
                  <view class="puadd" @click="nav_to('/pages/dynamic/dynamic_add')">
                    <image class="releaseimg"
                      src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png" mode="widthFix">
                    </image>
                    <view class="putitle">发布</view>
                  </view>
                </view>

                <!-- <view class="blackimg"></view> -->
                <view v-if="dynamicList.length > 0">
                  <view class="list wap" v-for="(item, index) in dynamicList" :key="index">
                    <view class="userbox" @click.stop="nav_to('/pages/user/user_visitor?id=' + item.UserID)">
                      <image class="userimg" :src="item.HeadImgUrl" mode="aspectFill"></image>
                      <view class="middbox">
                        <view class="name">{{
                          $util.entitiesToUtf16(item.Name)
                        }}
                          <image v-if="item.UserType != '普通用户'" mode="widthFix"
                            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
                        </view>
                        <view class="daybox">
                          <text class="Birthday">{{ getYearStr(item.Birthday) == '未知' ? '00后' :
                            getYearStr(item.Birthday)
                            + '后'
                            }}</text>
                          <!-- <text class="borderLine">|</text>
                  <text class="city" v-if="item.City">{{
                    item.City
                  }}</text> -->
                        </view>
                      </view>
                      <view class="time">
                        {{ getTime(item.CreateTime) }}
                      </view>
                    </view>
                    <view v-if="item.Content" class="content diyC">
                      {{ $util.entitiesToUtf16(item.Content).replace(/ /g, "&nbsp;") }}
                    </view>
                    <Layoutimg v-if="item.IsVideo === 0" :item="item" style="width: 95%;"></Layoutimg>
                    <view  class="video_box" v-else @click.stop="">
                      <!-- #ifdef MP-WEIXIN -->
                      <video :id="'video'+index"  style="position: relative;" :direction="0" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] +
                        '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'
                        " @play="videoPlay(index)">
                      </video>
                      <!-- #endif -->
                      <!-- #ifdef APP-PLUS -->
                        <view class="v_imgbox" @click="gotovideo(item)">
                          <image class="videoimg" style="max-width:100%;" :src="JSON.parse(item.Images)[0]+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill">
                        </image>
                        <image class="playimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17259497034651108.png"></image>
                        </view>
                      <!-- #endif -->
                    </view>
                    <view class="ft_btn">
                      <view class="citybottom">
                        {{ item.City ? item.City : '' }}
                      </view>
                      <view class="buttonbox" >
                        <!-- <view class="zan" v-if="userid == ID" @click="del(item.ID)">
                          <uni-icons type="trash" size="24" color="#9b9b9b"></uni-icons>
                        </view> -->
                        <view class="zan" @click="zan(item.ID)">
                          <uni-icons type="hand-up" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
                          <uni-icons type="hand-up-filled" size="24" color="#ef4034" v-else></uni-icons>
                          <text>{{
                            item.CommunityZAN.length > 0 ? item.CommunityZAN.length : ""
                          }}</text>
                        </view>
                        <view class="zan" @click="tocommit(item.ID, 0)">
                          <uni-icons type="chat" size="24" color="#9b9b9b"></uni-icons>
                          <text>{{
                            item.CommunityComments.length > 0
                              ? item.CommunityComments.length
                              : ""
                          }}</text>
                        </view>
                        <view class="zan">
                        <!-- #ifdef MP-WEIXIN -->
                        <button hover-class="none" open-type="share" :data-id="item.ID">
                          <uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
                        </button>
                        <!-- #endif -->
                        <!-- #ifdef APP-PLUS -->
                        <!-- <button hover-class="none" @click="app_share(item)">
										<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
									</button> -->
                        <!-- #endif -->
                        </view>
                      </view>
                    </view>
                    <view v-if="item.CommunityComments.length > 0" class="Commbox">
                      <view class="msgbox" v-for="(value, c_index) in item.CommunityComments" :key="c_index">
                        <view class="comment" @click.stop="comment_edit(index, c_index, value.Name)"
                          v-if="value.ReplyID > 0">
                          <text>
                            <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
                              $util.entitiesToUtf16(value.Name) }}</text>
                            <text class="reviewC">回复</text>
                            <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.Pre_UserID)"> {{
                              $util.entitiesToUtf16(value.Pre_Name) }}:</text>
                          </text>
                          <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                        </view>
                        <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-else>
                          <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
                            $util.entitiesToUtf16(value.Name) }}:</text>
                          <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="empty" v-else>
                  <u-empty mode="list" width="100" height="100"
                    icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
                    iconSize="32" text="暂无动态"></u-empty>
                </view>
              </view>

            </block>
            <!-- 圈言 -->
            <block v-if="nowTab == 2">
              <block v-if="reqData.IsJoin == 0">
                <view class="suobox">
                  <image class="suoimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1726041379869754.png"></image>
                  <view class="suotitle">非圈子成员无法查看圈言</view>
                  <view class="suotitle">快加入一起畅聊吧</view>
                </view>
              </block>
              <block v-else>
                <scroll-view :scroll-y="true" class="scroll-Y" :scroll-top="scrollTopmse" :scroll-with-animation="true">
                  <view class="load" v-if="!mseload">
                    <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
                  </view>
                <view  class="mesbox" >
                  <view id="mesview" class="mescont">
                    <view v-for="(item,index) in mseList" :key="index">
                      <view class="mestime">{{mindif(index)}}</view>
                      <!-- 其他人的消息 -->
                      <view class="other" v-if="item.UserID !=userid ">
                        <image class="otherhdimg" :src="item.HeadImgUrl" mode="aspectFill" @click="nav_to('/pages/user/user_visitor?id='+item.UserID)"></image>
                        <view class="otinfo">
                          <view class="otnamebox">
                            <view class="ottype" v-if="reqData.LeaderID == item.UserID">圈主</view>
                          <view class="otname">{{item.Name?$util.entitiesToUtf16(item.Name):''}}</view>
                          
                          </view>
                          <view class="otmes">{{item.Content?$util.entitiesToUtf16(item.Content):''}}</view>
                        </view>
                      </view>
                      <!-- 自己的消息 -->
                      <view v-else class="my">
                        <view class="myinfo">
                          <view class="mynamebox">
                          <view class="myname">
                            {{item.Name?$util.entitiesToUtf16(item.Name):''}}
                          </view>
                          <view class="mytype" v-if="reqData.LeaderID == item.UserID">圈主</view>
                          </view>
                          <view class="mycon">
                            <image class="mydel" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1725417858156805.png" @click="msedel(item.ID,index)"></image>
                            <view class="mymes">{{item.Content?$util.entitiesToUtf16(item.Content):''}}</view>
                          </view>
                        </view>
                        <image class="myhdimg" :src="item.HeadImgUrl" mode="aspectFill" @click="nav_to('/pages/user/user_visitor?id='+item.UserID)"></image>
                      </view>
                    </view>
            
                  </view>
                </view>
                </scroll-view>
            </block>
            </block>

          </scroll-view>
          <view style="width:100%" :style="[{ 'height': topheight + 58 + 'px' }]"></view>
        </view>

      </you-touchbox>
      <!-- </view> -->
    </view>
    <inputBox :commit="commit2" @submit="submit" @onBlur="onBlur"></inputBox>
    <view v-if="reqData.IsJoin != 0 && nowTab == 2" class="input-box2" :style="'bottom:'+keyheight+'px;'">
      <textarea ref="input" :style="isiP?'padding-top: 0rpx;height: 80rpx;line-height: 80rpx;':''" class="marginBottom" cursor-spacing="30" confirm-type="发送" :show-confirm-bar="false" maxlength="200" :value="mes" placeholder-class="placClass" placeholder="说点什么吧" @input="mseput" @blur="mseBlur" @focus="mesfo" :focus="focus"></textarea>
      <view class="view-btn2" @click="send">
          发送
      </view>
    </view>
  </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
import inputBox from "./components/input-box.vue";
import ActivityCell from "./components/ActivityCell/ActivityCell.vue";
export default {
  components: {
    topStatus,
    inputBox,
    ActivityCell,
  },
  data() {
    return {
      ossWatermark:'',
      isiP:false,
      phoneinfo:'', 
      focus:false,
      mseload:false,
      //滚动距离
			scrollTopmse: 0,
      mseList:[],
      shareTitle:'',
      sharePath:'',
      shareImg:'',
      keyheight:0,// 键盘高度
      mes:'',//留言内容
      IsTeamuser: 0, // 是否是圈主
      cirID: '', // 圈子ID
      reqData: {},
      topNav: false,
      load: false,
      isTouchDisable: false, // 是否禁用滑动
      nowTab: 0,//当前选中的tab
      topheight: 176,//顶部导航栏高度
      dynamicList: [],
      PageIndex: 1,
      PageSize: 10,
      
      cache_user:{},
      commit2: false,
      review_id: 0,
      comment_id: 0,
      zan_id: 0,
      repName: "",
      userid: null,
      user: {},
      actList: [],
      tabList: [
        {
          title: '圈子活动',
          num: 0,
        },
        {
          title: '圈友动态',
          num: 0,
        },
        {
          title: '圈言',
          num: 0,
        },
      ],
      tagsStyle: [
        {
          color: '#58ABFF',
          bgColor: '#2A3747',
        },
        {
          color: '#5EEC87',
          bgColor: '#264139',
        },
        {
          color: '#FF5684',
          bgColor: '#372A34',
        },
        {
          color: '#FF9241',
          bgColor: '#3E3731',
        },
        {
          color: '#A88AFF',
          bgColor: '#302A3D',
        },
        {
          color: '#FF92CE',
          bgColor: '#44363F',
        },
      ],
      userList: [],//圈子成员
      huiNum: 1,//加入圈子所需挥豆
    };
  },
  computed: {
    setTagData() {
      if (!this.reqData.Tag) {
        return []
      }
      let list = this.reqData.Tag.split(',') || []
      let newList = []
      for (let i = 0; i < list.length; i++) {
        let index = Math.floor(Math.random() * 6);
        newList.push({
          name: list[i],
          style: this.tagsStyle[index]
        })
      }
      return newList
    },
    temaBrowserNum() {
      if (this.reqData.BrowserNum > 99999999) {
        return (this.reqData.BrowserNum / 100000000).toFixed(1) + '亿'
      } else if (this.reqData.BrowserNum > 9999) {
        return (this.reqData.BrowserNum / 10000).toFixed(1) + 'W'
      } else {
        return this.reqData.BrowserNum
      }
    },
    temaHotValue() {
      if (this.reqData.HotValue > 99999999) {
        return (this.reqData.HotValue / 100000000).toFixed(1) + '亿'
      }
      else if (this.reqData.HotValue > 9999) {
        return (this.reqData.HotValue / 10000).toFixed(1) + 'W'
      } else {
        return this.reqData.HotValue
      }
    },
  },
  async onShow() {
    this.cirDetail()
    this.TeamUsers()
  },
  async onLoad(e) {
    this.cirID = e.id
    this.infophone()
    this.getJoinNum()
    this.getTopHight()
    this.comList()
    await this.getCity();
    this.cirDetail()
    this.TeamUsers()
    this.userid = uni.getStorageSync("user").UserID;
    this.user = uni.getStorageSync("user")
    this.cache_user = uni.getStorageSync("user");
    this.chooseTab(this.nowTab)
  },
  // // 触底事件
  // onReachBottom() {
  //   this.PageIndex++
  //   if (index == 0) {
  //     this.getActList()
  //   } else if (index == 1) {
  //     this.getDynamicList()
  //   }
  // },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > this.lastScrollTop) {
      // 向下滚动
      if (e.scrollTop >= 80) {
        this.topNav = true; // 你的逻辑
      }
      this.IsOpenBg = false; // 滚动条向上滚时执行的逻辑
    } else {
      // 向上滚动
      if (e.scrollTop < 80) {
        this.topNav = false; // 你的逻辑
      }
    }
    this.lastScrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
  },
  onShareAppMessage(e) {
    let trendsId = e.target.dataset.id;
    let o = this.dynamicList.find((item) => item.ID == trendsId);
    let pid = uni.getStorageSync("user").UserID;
    this.shareTitle = "挥友精彩瞬间，您不容错过";
    this.sharePath = "pages/dynamic/detail?pid=" + pid + "&id=" + trendsId;
    this.shareImg =
      o.IsVideo == 1
        ? JSON.parse(o.Images)[0] +
          "?x-oss-process=video/snapshot,t_1,m_fast,ar_auto"
        : JSON.parse(o.Images)[0];
    return {
      title: this.shareTitle,
      path: this.sharePath,
      imageUrl: this.shareImg,
    };
  },
  //分享朋友圈
  onShareTimeline() {

  },
  methods: {
    infophone(){
      let _this = this
      uni.getSystemInfo({
        success: function (info) {
          console.log(info,'222');
          _this.phoneinfo = info.model
          if(info.model.includes('iPhone')){
            if(info.model.includes('14')){
              _this.isiP =false
            }else{
               _this.isiP =true
            }
           
          }
          console.log('品牌：' + info.brand);
        }
      });
    },
    mindif(index){
			if((index+1) == this.mseList.length){
				return ''
			}
			let now = this.mseList[index]
			let next = this.mseList[index+1]
			const date1 = new Date(now.CreateTime);
			const date2 = new Date(next.CreateTime);
			const millisecondsDifference = date2.getTime() - date1.getTime();
			const minutesDifference = millisecondsDifference / (1000 * 60);
			if(minutesDifference >=10){
				return this.$util.unixDatetime(this.mseList[index].CreateTime,'yy-MM')
			}
		},
    //删除留言
    async msedel(id,index){

      let _this = this
			uni.showModal({
				title: "温馨提示",
				content: "您确定要删除该条留言吗？",
				confirmText: "确定",
				success: async function (res) {
				if (res.confirm) {
					let res1 = await _this.$api.post("Comment/Delete", {
					ID:id
					})
					if (res1.code == 0) {
					_this.mseList.splice(index,1)
					_this.$pv.msg("删除成功");
					} else {
					_this.$pv.msg(res1.message);
					}
				} else if (res.cancel) {
				}
				},
			});
      // let res = await this.$api.post('Comment/Delete',{
      //   ID:id
      // })
      // if(res.code == 0){
      //   this.mseList.splice(index,1)
      //   this.$pv.msg("删除成功");
      // }
    },
    mesaddtop(){
      this.PageIndex++
      this.comList()
    },
    sleep (value = 30){
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, value)
      })
    },
    getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; // 最大值也是包含的
      },
    // 滚动至聊天底部
    async scrollToBottom(wait) {
      if(this.reqData.IsJoin == 0){
        return
      }
      if (wait) await this.sleep(wait)
      let query = uni.createSelectorQuery().in(this);
      query.select('#mesview').boundingClientRect();
      query.exec(async (res) => {
        let hh = Math.floor(res[0].height)
          this.scrollTopmse = hh+this.getRandomIntInclusive(1,20)
          this.mseload = true
      })
    },
    //留言列表
    async comList(){
      let res = await this.$api.post('Comment/PageList',{
        Type:'圈子',
        EventID:this.cirID,
        PageIndex:this.PageIndex,
        PageSize:300,
      })
      if(res.code == 0){
        if(this.PageIndex == 1){
          this.mseList = res.data.reverse()
        }else{
          this.mseList = res.data.reverse().concat(this.mseList)
        }
        
      }
    },
    gotovideo(item){
      let src = JSON.parse(item.Images)[0]
      this.nav_to('/pages/album/myVideo?src='+src)
    },
    //发送留言
    async send(){
      this.focus = false
      let con = this.$util.utf16ToEntities(this.mes)
      setTimeout(()=>{
        this.focus = true
      },100)
      
      if(this.mes == ''){
        this.$pv.msg("请先输入内容");
        return
      }
      let res = await this.$api.post('Comment/Add',{
        Type:'圈子',
        EventID:this.cirID,
        Content:con
      })
      if(res.code == 0){
        this.mseList.push({
          Content:this.mes,
          CreateTime: new Date(),
          HeadImgUrl:this.user.HeadImgUrl,
          Name:this.user.Name,
          UserID:this.user.UserID,
          ID:res.data
        })
        this.scrollToBottom(50)
        this.mes = ''
        this.$pv.msg("发送成功");
      }
    },
    //留言输入
    mseput(e){
      const { value, cursor } = e.detail
			let str = this.$util.entitiesToUtf16(value)
			if (str.length > 200) {
				this.mes = str.slice(0, 200)
			} else {
				this.mes = str
			}
    },
    mesfo(){
      if(this.phoneinfo.includes('iPhone')){
        
        this.keyheight = 30
      }else{
        this.keyheight = 0
      }
      
      this.scrollToBottom(50)
    },
    mseBlur(){
      this.keyheight = 0
    },
    //视频播放
    videoPlay(index){
      let video = uni.createVideoContext("video"+index,this)
      // video.play();
      for (let i = 0; i < this.dynamicList.length; i++) {
        if(i !=index){
          let video2 = uni.createVideoContext("video"+i,this)
          video2.pause()
        }
        
      }
    },
    // 获取加入圈子需要多少挥豆
    async getJoinNum() {
      let res = await this.$api.post("Common/GetServerPrice", {
        Item: '加入圈子'
      })
      if (res.code == 0) {
        this.huiNum = res.data.Score || 0
      }
    },
    //加入圈子
    async JoinTeam(id) {
      let _this = this
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
      } else {
        uni.showModal({
          title: "温馨提示",
          content: `加入圈子将消耗${this.huiNum}个挥豆，您确定要加入该圈子吗？`,
          confirmText: "确定",
          success: async function (res) {
            if (res.confirm) {
              let res1 = await _this.$api.post("Team/JoinTeam", {
                ID: id
              })
              if (res1.data) {
                _this.$pv.msg(res1.message || '加入成功，请等待审核~');
                // _this.reqData.IsJoin = 1
              } else {
                _this.$pv.msg(res1.message);
              }
            } else if (res.cancel) {
            }
          },
        });
      }
    },
    // 退出圈子
    quitTeam(item) {
      let _this = this;
      if (this.user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还未注册，请先注册",
          confirmText: "确定",
          success: function (res) {
            if (res.confirm) {
              _this.nav_to("/pages/start/start2");
            } else if (res.cancel) {
            }
          },
        });
        return
      }
      if (item.IsTeamAdmin == 1) {
        _this.$pv.msg("圈主无法退出");
        return
      }
      uni.showModal({
        title: "温馨提示",
        content: "您确定要退出该圈子吗？",
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post("Team/Quit", {
              TeamID: item.ID
            })
            if (res1.code == 0) {
              _this.$pv.msg("退出成功");
              _this.reqData.IsJoin = 0
            } else {
              _this.$pv.msg(res1.message);
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    //圈子成员
    async TeamUsers() {
      let res = await this.$api.post("Team/TeamUsers", {
        TeamID: this.cirID,
        PageIndex: 1,
        PageSize: 20,
      })
      if (res.code == 0) {
        this.userList = res.data
      }
    },
    //圈子详情
    async cirDetail() {
      let res = await this.$api.post("Team/Detail", {
        ID: this.cirID
      })
      if (res.code == 0) {
        this.reqData = res.data
        this.load = true
        this.IsTeamuser = res.data.IsTeamAdmin
      }
    },
    // 预览图片
    seeBGImg(img) {
      uni.previewImage({
        urls: [img],
        current: 0,
      });
    },
    // 获取自定义头部高度
    getTopHight() {
      let _this = this;
      uni.getSystemInfo({
        success: res => {
          console.log(res, 'res');
          _this.topheight = res.statusBarHeight + 44;
        },
        fail(err) {
        }
      })
    },
    async getDynamicList() {
      let res = await this.$api.post("Team/TeamCommunity", {
        ID: this.reqData.ID,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      });

      let l = this.PageIndex == 1 ? res.data : this.dynamicList.concat(res.data);
      this.dynamicList = this.clearRepetition(l, "ID");
      this.$pv.closeLoad();
    },
    // 去重,后面的覆盖前面的
    clearRepetition(arr, key = "id") {
      let newArr = [];
      arr.forEach((item) => {
        let index;
        let check = newArr.every((newItem, i) => {
          if (item[key] !== newItem[key]) {
            index = -1;
            return true;
          } else {
            index = i;

            return false;
          }
        });
        if (check) {
          newArr.push(item);
        } else {
          newArr.splice(index, 1, item);
        }
      });
      return newArr;
    },
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/home'
        });
      }
    },
    getEndDetail({ minTop, maxTop, curTop }) {
      // console.log(minTop, maxTop, curTop);
    },
    lowermore() {
      this.PageIndex++
      if (this.nowTab == 0) {
        this.getActList()
      } else if (this.nowTab == 1) {
        this.getDynamicList()
      }
    },
    // 选择标签
    chooseTab(index) {
      this.nowTab = index
      this.PageIndex = 1
      if (index == 0) {
        this.getActList()
      } else if (index == 1) {
        this.getDynamicList()
      }else if( index == 2){
        this.focus =false
         this.scrollToBottom(1000)
        this.comList()
      }
    },
    onBlur(emit) {
      setTimeout(() => {
        this.commit2 = emit;
      }, 500)

    },
    // 评论
    async submit(val) {
      if (val != "") {
        let utf16 = this.$util.utf16ToEntities(val).slice(0, 200);
        let res = await this.$api.post("/Community/UserComment", {
          CommunityID: this.review_id,
          Content: utf16,
          CompanyID: 6002,
          ReplyID: this.comment_id,
        });
        if (res.code == 0) {
          console.log("user====>", res);
          this.dynamicList.forEach((item, index) => {
            if (item.ID == this.review_id) {
              item.CommunityComments.push({
                UserID: uni.getStorageSync("user").UserID,
                HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
                Name: uni.getStorageSync("user").Name,
                Content: val,
                CreateTime: new Date(),
                ReplyID: this.comment_id,
                Pre_Name: this.repName,
                ID: res.data
              });
              this.dynamicList.splice(index, 1, item);
              console.log(item.ID, this.review_id);
            }
          });

          this.commit2 = !this.commit2;
        }
      } else {
        this.$pv.msg("评论不能为空");
      }
    },
    // 赞
    async zan(id) {
      this.zan_id = id;
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      let res = await this.$api.post("Community/ZAN", {
        ID: id,
      });

      if (JSON.stringify(res.data) == "true") {
        this.$pv.msg("点赞成功");

        this.dynamicList.forEach((item, index) => {
          if (item.ID == this.zan_id) {
            item.IsMyZAN = 1;
            item.CommunityZAN.push({
              UserID: this.cache_user.UserID,
              HeadImgUrl: this.cache_user.HeadImgUrl,
            });
            this.dynamicList.splice(index, 1, item);
          }
        });
      } else {
        this.$pv.msg(res.message);
      }
    },
    //回复消息
    comment_edit(index, c_index, Name = "") {
      let _this = this;
      _this.repName = Name;
      const user = uni.getStorageSync("user");

      const item = this.dynamicList[index].CommunityComments[c_index];

      if (user.ID == item.UserID) {
        uni.showActionSheet({
          itemList: ["删除评论"],
          success: function (res) {
            if (res.tapIndex == 0) {
              _this.delReview(index, c_index);

              return;
            }
          },
          fail: function (res) { },
        });
      } else {
        //直接回复
        this.tocommit(item.CommunityID, item.ID);
      }
    },
    // 评论
    tocommit(ID, C_ID) {
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      this.commit2 = !this.commit2;
      this.review_id = ID;
      this.comment_id = C_ID;
    },
    async delReview(index, c_index) {
      const item = this.dynamicList[index].CommunityComments[c_index];

      let res = await this.$api.post("/Community/DeletePage", {
        ID: item.ID,
      });
      this.$pv.msg("删除成功");
      this.$store.commit('changeRefresh', true)
      this.dynamicList[index].CommunityComments.splice(c_index, 1);
    },
    // 获取一起挥列表
    async getActList() {
      let res = await this.$api.post("Team/TeamParty", {
        TeamID: this.cirID,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      })
      // let res = await this.$api.post("Appointment/PageList", {
      //   PageIndex: this.PageIndex,
      //   PageSize: this.PageSize,
      //   Appointment: '一起挥',
      //   User_Lng: this.longitude,
      //   User_Lat: this.latitude,
      // })
      if (res.code == 0) {
        if (this.PageIndex == 1) {
          this.actList = res.data
        } else {
          this.actList = this.actList.concat(res.data)
        }
      }

    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    // 获取当前地址并解析
    async getCity() {
      let loc = await this.getLocationSysc();

      let longitude = loc.longitude;
      this.longitude = loc.longitude;
      let latitude = loc.latitude;
      this.latitude = loc.latitude;
      let o = {
        longitude,
        latitude,
      };
    },
  },
};
</script>
<style lang="scss">
page {
  // background: #fefefe;
  background: #0f1318;
}
button::after {
  border: none;
}
.video_box {
  width: 100%;
  height: 500rpx;
  position: relative;
  z-index: 2;
  margin-top: 10rpx;
  video {
    width: 50%;
    height: 100%;
    // margin-top: 10rpx;
    
  }
  .v_imgbox{
    width: 70%;
    position: relative;
  }
  .videoimg{
    display: block;
  }
  .playimg{
      width: 96rpx;
      height: 96rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
}
.load {
  width: 100%;
  height: 100vh;
  background: white;
}

view {
  box-sizing: border-box;
}


.page_top2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  .tabsBack {
    height: 44px;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
    z-index: 999;

    .topTitle {
      padding-left: 20rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      width: 300rpx;
    }

    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }
}

.backView {
  position: relative;
  background: #0f1318;
  width: 100%;
  padding-bottom: 360rpx;

  .bglogo {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block;


    .bglImg {
      width: 100%;
      position: relative;

      >image {
        width: 100%;
        height: 100%;
        display: block;
      }

      .darken-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        mix-blend-mode: multiply;
      }
    }


    // z-index: -1;
  }

  .bvContent {
    position: relative;
    width: 100%;
    padding: 0 40rpx;

    .bvLogo {
      width: 100%;
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .bvadd {
        width: 144rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #706EEE;
        border-radius: 30rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        // margin-left: 24rpx;
      }

      .bvLogoImg {
        width: 128rpx;
        height: 128rpx;
        display: block;
        border-radius: 16rpx;
        border: 4rpx solid #FFFFFF;
      }
    }

    .bvTitle {
      width: 100%;
      font-size: 32rpx;
      color: #FFFFFF;
      font-weight: bold;
      margin-top: 32rpx;
    }

    .bvRemark {
      width: 100%;
      font-weight: 500;
      font-size: 24rpx;
      color: #EFEFEF;
      margin-top: 8rpx;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* 控制显示的行数 */
      -webkit-box-orient: vertical;
      /* 设置垂直排列 */
      overflow: hidden;
      /* 隐藏超出的部分 */
      text-overflow: ellipsis;
      /* 当文本被截断时显示省略号 */
      height: 68rpx;
      margin-bottom: 42rpx;
    }

    .bvInformation {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .bvNumBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 340rpx;

        .bvNumCell {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .bvnNum {
            font-weight: 500;
            font-size: 36rpx;
            color: #EFEFEF;
          }

          .bvnName {
            font-weight: 500;
            font-size: 24rpx;
            color: #EFEFEF;
          }
        }
      }

      .bvnBtnBox {
        display: flex;
        align-items: center;

        .erwBtn {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          background-color: #fff;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;

          >image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }
        }

        .joinBtn {
          width: 144rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #706EEE;
          border-radius: 30rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          margin-left: 24rpx;
        }

        .quitBtn {
          width: 144rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #E4E4E4;
          border-radius: 30rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #999999;
          margin-left: 24rpx;
        }
      }
    }

    .bvTagsBox {
      width: 100%;
      margin-top: 56rpx;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .bvtCell {
        height: 54rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10rpx 16rpx;
        font-weight: 500;
        font-size: 24rpx;
        background: #2A3747;
        color: #58ABFF;
        border-radius: 8rpx;
        margin-right: 24rpx;
        margin-bottom: 16rpx;
      }
    }

    .bvContentBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .bvcTitle {
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
      }

      .bvcBRight {
        display: flex;
        align-items: center;
        color: #C0C0C0;
        font-weight: 500;

        image {
          width: 100%;
          height: 100%;
          display: block;
        }

        .cityIcon {
          width: 32rpx;
          height: 32rpx;
        }

        .bvcText-city {
          font-size: 28rpx;
          color: #C0C0C0;
        }

        .arrowIcon {
          width: 24rpx;
          height: 24rpx;
        }

        .bvcText-user {
          font-size: 24rpx;
          color: #C0C0C0;
        }
      }
    }

    .bvUserBox {
      width: 100%;
      overflow: auto;

      .bvUserList {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding-right: 40rpx;

        .bvuCell {
          width: 88rpx;
          margin-right: 40rpx;

          .bvuHead {
            width: 88rpx;
            height: 88rpx;
            border-radius: 50%;
            overflow: hidden;

            image {
              width: 100%;
              height: 100%;
              display: block;
              border-radius: 50%;
            }
          }

          .bvuName {
            width: 100%;
            font-weight: 500;
            font-size: 24rpx;
            color: #C0C0C0;
            text-align: center;
          }
        }
      }
    }

    .bvCdescBox {
      width: 100%;
      font-weight: 500;
      font-size: 30rpx;
      color: #666666;
      white-space: pre-wrap;
     
    }

  }

}

.bgBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;


}

.floor-item {
  margin-bottom: 20rpx;
  height: 160rpx;
  border-radius: 50rpx;
  background: rgba(51, 51, 51, 0.3);
  text-align: center;
  background-position: center;
  background-size: cover;
}

.topTab {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 18rpx;
  // padding-bottom: 60rpx;
  padding-bottom: 34rpx;

  .tabTitle {
    position: relative;
    font-size: 28rpx;
    color: #999999;
    margin-right: 48rpx;
  }

  .tabTitleIng {
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;

    &::after {
      position: absolute;
      bottom: -16rpx;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      width: 46rpx;
      height: 12rpx;
      background: #706EEE;
      border-radius: 6rpx;
    }
  }
}

.album {
  padding-bottom: 30rpx;

  .blackimg {
    width: 48rpx;
    height: 8rpx;
    background-color: #0c0c0c;
    border-radius: 5rpx;
    margin-left: 42rpx;
  }

  .hd {
    margin-top: 40rpx;
    font-size: 32rpx;
    line-height: 38rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 36rpx;
  }

  .title_right {
    position: absolute;
    right: 30rpx;
  }

  .list {
    // background: #262626;
    // padding-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;
    // margin-top: 8rpx;
    box-sizing: border-box;
    // width: 95%;
    width: 100%;
    margin: 13rpx auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 16rpx;
    box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
    padding: 20rpx;
    box-sizing: border-box;

    .userbox {
      display: flex;
      width: 100%;

      .userimg {
        min-width: 80rpx;
        width: 80rpx;
        height: 80rpx;
        display: block;
        border-radius: 50%;
      }

      .middbox {
        margin-left: 24rpx;
        flex: 1;
        min-width: 424rpx;
        width: 424rpx;

        .name {
          width: 100%;
          font-size: 32rpx;
          color: #333333;
          font-weight: 600;
          display: flex;
          align-items: center;

          >image {
            width: 76rpx;
            margin-left: 10rpx;
          }
        }

        .daybox {
          font-weight: 400;

          .Birthday {
            font-size: 24rpx;
            color: #999999;
            // border-right: 1rpx solid #999999;
            padding: 0 15rpx 0 0;
          }

          .borderLine {
            color: #999999;
            font-size: 24rpx;
          }

          .city {
            font-size: 24rpx;
            color: #999999;
            margin-left: 15rpx;
          }
        }
      }

      .time {
        // margin-left: 268rpx;
        width: 140rpx;
        text-align: right;
        font-size: 24rpx;
        color: #999999;
      }
    }

    &::after {
      content: "";
      display: block;
      height: 1px;
      width: 325rpx;
    }

    .message {
      width: 100%;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .name-avatar {
        height: 80rpx;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 10rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
          }
        }

        .name {
          margin-left: 10rpx;
          font-size: 15px;
          font-weight: 600;
        }
      }

      .time {
        width: 200rpx;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 15px;
        text-align: right;
      }
    }

    .content {
      margin-top: 24rpx;
      margin-bottom: 10rpx;
      font-size: 28rpx;
      color: #7b7b7b;
      width: 100%;
    }

    .diyC {
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      white-space: pre-line;
    }

    .imglist {
      box-sizing: border-box;
      width: 100%;
      margin: 10rpx 0 20rpx 0;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;

      .img {
        box-sizing: border-box;
        width: 180rpx;
        height: 180rpx;
        margin-top: 20rpx;
        margin-left: 18rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .ft_btn {
      width: 100%;
      margin-bottom: 10rpx;
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      // justify-content: flex-end;
      // justify-content: space-between;

      .citybottom {
        font-size: 24rpx;
        color: #999999;
      }

      .buttonbox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // width: 140rpx;
        font-size: 26rpx;
        margin-left: auto;

        .zan {
          display: flex;
          align-items: center;
        }
      }

      .boxWidth {
        width: 230rpx;
      }

      button {
        height: 44rpx;
        width: 44rpx;
        // margin-left: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 44rpx;
          width: 44rpx;
        }
      }

      .icon_box {
        height: 48rpx;
        width: 48rpx;
        border-radius: 48rpx;
        background: rgba(255, 255, 255, 0.9);
        margin-right: 16rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          height: 32rpx;
          width: 32rpx;
        }
      }

      .time {
        width: 75%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 15px;
        text-align: left;
      }

      .icon_pad {
        width: 44rpx;
        height: 44rpx;
        padding-left: 25rpx;
        padding-right: 10rpx;
        text-align: left;
      }
    }

  }

  .empty {
    // background: #fff;
    min-height: 500rpx;
  }

  .item {
    height: 336rpx;
    width: 336rpx;
    margin: 0 2rpx;
    margin-top: 2rpx;

    image {
      height: 100%;
      width: 100%;
      // border-radius: 10rpx;
    }

    &:nth-child(2n + 1) {
      margin-left: 0;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  .albumTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    position: relative;

    .puadd {
      width: 100rpx;
      height: 46rpx;
      border-radius: 32rpx;
      background-color: #706eee;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;

      .putitle {
        color: #fff;
        font-size: 22rpx;
        font-weight: 400;
      }

      .releaseimg {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

.Commbox {
  width: 100%;

  .msgbox {
    // background-color: #f6f6f6;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;

    .comment {
      color: #afafaf;
      font-size: 28rpx;

      word-break: break-all;

      text {
        box-sizing: border-box;
        font-weight: 500;
        font-size: 28rpx;
        color: #5f698b;
        padding-right: 10rpx;
      }

      .reviewC {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        margin: 0 10rpx;
      }

      >text:last-child {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        word-break: break-all;
        margin-left: 10rpx;
      }
    }
  }
}

.actconBoxList {
  width: 100%;
  padding: 20rpx 20rpx 40rpx 20rpx;
}
.input-box2 {
    width: 100vw;
    height: 188rpx;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 20rpx;
    border-top: 1px solid rgba(204, 204, 204, .4);
    background-color: #fff;
    display: flex;
    z-index: 999;
    
    textarea {
        border: 1px solid #EEEEEE;
        background: #EEEEEE;
        padding-left: 20rpx;
        padding-top: 10rpx;
        // padding-bottom: 10rpx;
        flex: 1;
        margin-right: 20rpx;
        color: #848484;
        resize: none; /* 阻止用户调整文本区域的尺寸 */
        overflow-y: hidden; /* 隐藏滚动条 */
        height: 70rpx; /* 初始高度为自动撑开 */
        line-height: 70rpx;
        border-radius: 8rpx;
    }
    .placClass{
        color: #999999;
    }
    .marginBottom{
        // margin-bottom: 30rpx;
        color: #333333;
        font-size: 28rpx;
    }
    .view-btn2 {
        width: 80px;
        text-align: center;
        line-height: 36px;
        height: 64rpx;
        background-color: #706EEE;
        color: #fff;
        border-radius: 8rpx;
        margin-top: 8rpx;
    }
}
.scroll-Y{
  // position: relative;
  // height: 1150rpx;
  padding-bottom: 200rpx;
  height: 1150rpx;
  .load{
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    left: 0;
    top: 0;
  }
}
.suobox{
  text-align: center;
  margin-top: 58rpx;
}
.suoimg{
    width: 160rpx;
    height: 160rpx;
}
.suotitle{
  color: #999999;
  font-size: 28rpx;
}
.mesbox{
  width: 100%;
  // height: 1150rpx;
  padding: 56rpx 0;
  // overflow-y: auto;
  // background-color: red;
  .mescont{
    width: 100%;
    padding: 0 24rpx;
    .mestime{
      font-size: 24rpx;
      color: #999999;
      text-align: center;
      margin-bottom: 32rpx;
      margin-top: 20rpx;
    }
    .other{
      display: flex;
      // align-items: end;
      margin-bottom: 32rpx;
      .otherhdimg{
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #58ABFF;
        margin-right: 24rpx;
      }
      .otinfo{
        .otnamebox{
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;
        }
        .otname{
          font-size: 24rpx;
          color: #999999;
          // margin-bottom: 8rpx;
          margin-left: 10rpx;
        }
        .ottype {
          width: 60rpx;
          height: 32rpx;
          background: #706EEE;
          border-radius: 4rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 22rpx;
          color: #fff;
        }
        .otmes{
          width: fit-content;
          white-space: pre-line;
          max-width: 446rpx;
          min-height: 74rpx;
              word-break: break-all;
          padding: 20rpx 32rpx;
          background: #ECECFA;
          border-radius: 0rpx 24rpx 24rpx 24rpx;
          font-size: 28rpx;
          color: #706EEE;
        }
      }
    }
    .my{
      display: flex;
      // align-items: end;
      justify-content: flex-end;
      .myhdimg{
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #58ABFF;
        margin-left: 24rpx;
      }
      .myinfo{
        .mynamebox{
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-bottom: 8rpx;
        }
        .myname{
          font-size: 24rpx;
          color: #999999;
          // margin-bottom: 8rpx;
          margin-right: 10rpx;
          text-align: end;
        }
        .mytype {
          width: 60rpx;
          height: 32rpx;
          background: #706EEE;
          border-radius: 4rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 22rpx;
          color: #fff;
        }
        .mycon{
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
        .mymes{
          width: fit-content;
          white-space: pre-line;
          max-width: 446rpx;
          min-height: 74rpx;
          padding: 20rpx 32rpx;
          background: #706EEE;
          border-radius: 24rpx 0rpx 24rpx 24rpx;
          font-size: 28rpx;
          color: #fff;
          word-break: break-all;
        }
        .mydel{
          width: 32rpx;
          height: 32rpx;
          margin-right: 16rpx;
        }
      }
    }
  }
}
</style>
